<template>
    <div>
        <div class="profileTitle">
            <div class="chartTitle">
                <h3>Color Profile</h3>
                <div class="profileCon">
                    Your results are: <br>
                    Red:<span>{{ colors[2] }}</span>,
                    Blue:<span>{{ colors[3] }}</span>,
                    White:<span>{{ colors[0] }}</span>,
                    Yellow:<span>{{ colors[1] }}</span>,
                </div>
                <p>The color whit the highest value shows your primary motivator,and the second highest typically also holds motivation for you.</p>
            </div>
            <GChart
                    class="GoogleChart"
                    type="PieChart"
                    :data="chartData"
                    :options="chartOptions"
            />
        </div>
        <div class="profiletable">
            <div class="prorow">
                <div class="pro_l">Color</div>
                <div class="pro_r ground">Motive / Meaning</div>
            </div>
            <div class="prorow">
                <div class="pro_l">RED</div>
                <div class="pro_r">(Motive: POWER)—These are the power wielders.Power: the ability to move from point A to point B and get things done, is what motivates and drives these people.They bring great gifts of vision and leadership and generally are responsible, decisive, proactive and assertive.</div>
            </div>
            <div class="prorow">
                <div class="pro_l">BLUE</div>
                <div class="pro_r">(Motive:INTIMACY)-These are the do-gooders. Intimacy : connecting, creating quality relationships and having purpose, i what motivates anddrives these people.They bring great gifts of quality and service and are generally loyal, sincere, and thoughtful.</div>
            </div>
            <div class="prorow">
                <div class="pro_l">WHITE</div>
                <div class="pro_r">(Motive: PEACE)一These are the peacekeepers. Peace: the ablity to stay calm and balanced even in the midst of confict is what motivates anddrives these people.They bring great gifts of clarity and tolerance and are generally kind , adaptable, and good-listeners.</div>
            </div>
            <div class="prorow">
                <div class="pro_l">YELLOW</div>
                <div class="pro_r">(Motive: Fun)—These are the fun lovers. Fun: the joy of lving life "'in the moment , is what motivates and drives these people. They bring greatgifts of enthusiasm and optimism and are generally charismatic, spontaneous,and sociable.</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { GChart } from  "vue-google-charts"
    export default {
        props:['colors'],
        name: "PieChart",
        components:{
            GChart
        },
        methods:{
            getThisColors(i){
                return this.colors[i];
            }
        },
        mounted() {
            this.chartData[1][1] = this.colors[0];
            this.chartData[2][1] = this.colors[1];
            this.chartData[3][1] = this.colors[2];
            this.chartData[4][1] = this.colors[3];
        },
        data () {
            return {
                // colors:[4,5,17,19],
                // Array will be automatically processed with visualization.arrayToDataTable function
                chartData: [
                    ['Task','Hours per Day'],
                    ['White',1],
                    ['Yellow',1],
                    ['Red',1],
                    ['Blue',1],
                ],
                chartOptions: {
                    pieSliceText:'none',
                    colors:['rgb(244,244,244)','yellow','red','blue'],
                    legend:{'position':'labeled'},
                    width:'340',
                    height:'180'
                }
            }
        }
    }
</script>

<style scoped>
    *{
        padding: 0;
        margin: 0;
    }
    .profileTitle{
        width: 100%;
        padding: 20px 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }
    .GoogleChart{
    }
    .chartTitle{
        display: flex;
        flex-direction:column;
        justify-content: center;
    }
    .chartTitle h3{
        margin-bottom: 10px;
        font-size: 26px;
    }
    .chartTitle p{
        margin-top: 10px;
    }
    .profiletable{
        padding: 20px;
        box-sizing: border-box;
    }
   .prorow{
       display: flex;
   }
    .pro_l{
        flex: 0 0 120px;
        padding-left: 10px;
        min-height: 30px;
        display: flex;
        align-items: center;
        text-align: center;
        background: rgb(213,209,200);
        color: rgb(113,112,132);
        font-weight: bold;
    }
    .pro_r{
        color: #333;
        flex: 1;
        padding: 10px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgb(213,209,200);
        border-right: 1px solid rgb(213,209,200);
    }
    .ground{
        background: rgb(213,209,200);
        border: none;
        color: rgb(113,112,132);
        font-weight: bold;
    }

</style>